<div class="default-background">
    <div style="margin-top: 16px;">
        <div style="font-size: 32px; margin: 8px 0px 16px 0px; font-weight: 700; line-height: 32px;">
            {{'ADD_NEW_PERMISSION'|translate}}
        </div>
        <div style="margin: 0px 0px 16px 0px; color: #545968; font-size: 14px;">{{'CREATE_PERM_SUB'|translate}}
        </div>
    </div>
    <form [formGroup]="fg"
        style="display: flex; flex-direction: row;align-items: center; justify-content: space-between;">
        <div style="display: flex; flex: 1; margin-right: 36px;">
            <div style="flex: 1;">
                <mat-form-field>
                    <mat-label>{{'NAME'| translate}}<span class="mat-required">*</span></mat-label>
                    <input matInput formControlName="name">
                </mat-form-field>
                <div style="font-size: 12px; color: red; margin-top: -8px;">{{nameErrorMsg|translate}}
                </div>
            </div>
            <div style="margin: 0px 24px;flex: 1;">
                <mat-form-field>
                    <mat-label>{{'DESCRIPTION'| translate}}</mat-label>
                    <input matInput formControlName="description">
                </mat-form-field>
            </div>

            <app-paginated-select [fg]="fg" [label]="'SELECT_API'|translate" [key]="'apiId'" multiple="true"
                [loadElements]="getEndpoints()" style="flex: 1;">
            </app-paginated-select>
        </div>
        <button mat-raised-button color="primary"
            *ngIf="permissionHelper.extractResult(permissionHelper.canDo(projectId, httpSvc.currentUserAuthInfo.permissionIds,'PERMISSION_MGMT')) |async "
            (click)="create()">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <mat-icon>add</mat-icon>
                <div>{{'ADD'|translate}}</div>
            </div>
        </button>
    </form>
    <ng-container
        *ngIf="permissionHelper.extractResult(permissionHelper.canDo(projectId, httpSvc.currentUserAuthInfo.permissionIds,'PERMISSION_MGMT')) |async ">
        <div style="margin: 16px 0px 24px 0px">
            <div style="font-size: 32px; margin: 8px 0px 16px 0px; font-weight: 700; line-height: 32px;">
                {{'MY_PERMISSION_DASHBOARD'|translate}}
            </div>
            <div style="margin: 0px 0px 16px 0px; color: #545968; font-size: 14px;">{{'PERM_LIST_SUB'|translate}}
            </div>
        </div>
        <div class="table-container">
            <table mat-table [dataSource]="tableSource.dataSource">
                <ng-container matColumnDef="id">
                    <th mat-header-cell *matHeaderCellDef> {{tableSource.columnConfig['id']|translate}}
                    </th>
                    <td mat-cell *matCellDef="let row">
                        <app-copy-field [inputValue]="row.id"></app-copy-field>
                    </td>
                </ng-container>
                <ng-container matColumnDef="name">
                    <th mat-header-cell *matHeaderCellDef> {{tableSource.columnConfig['name']|translate}}
                    </th>
                    <td mat-cell *matCellDef="let row">
                        <ng-container *ngIf="row.systemCreate">
                            {{row.name |translate}}
                        </ng-container>
                        <ng-container *ngIf="!row.systemCreate">
                            {{row.name}}
                        </ng-container>
                    </td>
                </ng-container>
                <ng-container matColumnDef="description">
                    <th mat-header-cell *matHeaderCellDef> {{tableSource.columnConfig['description']|translate}}
                    </th>
                    <td mat-cell *matCellDef="let row">
                        {{row.description}}
                    </td>
                </ng-container>
                <ng-container matColumnDef="linkedApi">
                    <th mat-header-cell *matHeaderCellDef> {{tableSource.columnConfig['linkedApi']|translate}} </th>
                    <td mat-cell *matCellDef="let row">
                        <!-- @todo create new component with my-cors for below -->
                        <ng-container *ngIf="row.linkedApiNames && row.linkedApiNames.length>1">
                            <mat-chip-list aria-label="chip list selection">
                                <mat-chip>
                                    {{row.linkedApiNames[0]}}
                                </mat-chip>
                                <mat-chip [matMenuTriggerFor]="more">
                                    +{{(row.linkedApiNames.length-1)}} {{'MORE'|translate}}
                                </mat-chip>
                                <mat-menu #more="matMenu">
                                    <ng-template matMenuContent>
                                        <div style="display: flex;flex-direction: column;padding: 8px;">
                                            <mat-chip *ngFor="let e of removeFirst(row.linkedApiNames)" mat-menu-item
                                                style="margin-bottom:8px">
                                                {{e}}
                                            </mat-chip>
                                        </div>
                                    </ng-template>
                                </mat-menu>
                            </mat-chip-list>
                        </ng-container>
                        <ng-container *ngIf="row.linkedApiNames && row.linkedApiNames.length<=1">
                            <mat-chip-list aria-label="chip list selection">
                                <mat-chip *ngFor="let e of row.linkedApiNames">
                                    {{e}}
                                </mat-chip>
                            </mat-chip-list>
                        </ng-container>
                    </td>
                </ng-container>
                <ng-container matColumnDef="delete">
                    <th mat-header-cell *matHeaderCellDef class="table-icon">
                        {{tableSource.columnConfig['delete']|translate}}</th>
                    <td mat-cell *matCellDef="let row" class="table-icon">
                        <mat-icon (click)="doDelete(row.id)" [color]="'warn'">delete_outline</mat-icon>
                    </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="tableSource.displayedColumns(); sticky: true"></tr>
                <tr mat-row *matRowDef="let row; columns: tableSource.displayedColumns();"></tr>
            </table>
        </div>

        <mat-paginator [showFirstLastButtons]="true" [length]="tableSource.totoalItemCount"
            [pageIndex]="tableSource.pageNum" [pageSize]="tableSource.pageSize"
            (page)="tableSource.loadPage($event.pageIndex)">
        </mat-paginator>
    </ng-container>
</div>